<template>
	<view>
		<view class="my_order" :style="{paddingTop: vuex_custom_bar_height+ 'px'}">
			<tn-nav-bar  :alpha="true" :beforeBack="beforeBack">我的订单</tn-nav-bar>
			
			<!-- 顶部标签 -->
		    <tn-tabs-swiper ref="tabs"  activeColor="#FF6708" inactiveColor="#080808" :list="list" :current="tabsIndex" :isScroll="false" @change="tabsChange"></tn-tabs-swiper>
			
			<!-- 标签内容 -->
			<swiper class="swiper__box"   :current="swiperIndex" @transition="swiperTransition" @animationfinish="swiperAnimationFinish">
				<swiper-item class="swiper__item" v-for="(t,i) in list" :key="i">
					<scroll-view
					  class="list-scroll-content"
					  :scroll-y="true"
					  @scrolltolower="getMoreOrderList"
					>
					  <view
					    v-for="(item, index) in orderList"
					    :key="index"
					    class="rf-order-item"
					  >
					    <view class="i-top">
					      <text class="in1line">订单号:{{ item.order_sn }} ({{ orderTypeFilter(item.type) }})</text>
					      <text class="state">{{ orderStatusFilter(item) }}</text>
					    </view>
						<view class="i-content">
							<image style="width: 20%;height: auto; " mode="aspectFit" :src="getSrc(item)"></image>
							<view class="rt">
								<view class="info">
									<view class="title">{{getTitle(item)}}</view>
									<view class="topic" style="color: #666;font-size: 12px;" v-if="item.mentor.topic.name">{{item.mentor.topic.name}}</view>
								</view>
								<view class="ft">
									<view class="price">￥{{getPrice(item)}}</view>
									<view class="number"> 人数:{{item.order_number}}</view>
									<view class="times" v-if="item.type == 1"> 时间段:{{getTimesCount(item.times)}}</view>
								</view>
								
							</view>
						</view>
					
					    <view class="price-box">
					      
					      <view class="total">
					        总价
					        <text class="price"><text class="font-sm">￥</text>{{ item.pay_money }}</text>
					      </view>
					      <view class="amount">
					        <text class="price font-weight-500" ><text class="font-sm">￥</text>{{ item.pay_money }}</text>
					      </view>
					    </view>
					    <view class="action-box">
					      <button
					        v-if="item.order_status === 0"
					        class="action-btn cacel-btn"
					        @tap="cancelOrders(item.order_sn)"
					      >
					        取消订单
					      </button>

					      <button
					        class="action-btn "
					        @tap="orderDetail(item.order_sn)"
					      >
					        订单详情
					      </button>
		
					      <button
					        v-if="item.order_status === 0"
					        class="action-btn "
					        @tap="turnPay(item.order_sn)"
					      >
					        立即支付
					      </button>
					      
						  <button
						    v-if="item.order_status === 1 && item.is_return==0"
						    class="action-btn "
						    @tap="returnMoney(item.order_sn)"
						  >
						    申请退款
						  </button>
				
					      <button
					        v-if="item.order_status === 1 && item.is_return==0"
					        class="action-btn "
					        @tap="confirmOrder(item.order_sn)"
					      >
					        确认服务
					      </button>
						  
						  <button
						    v-if="item.order_status === 2"
						    class="action-btn "
						    @tap="comment(item.order_sn)"
						  >
						    去 评 论
						  </button>
					    </view>
					  </view>
					  
					  <view class="empty__item" v-if="orderList.length < 1 && !loading" style="margin-top: 200px;">
					    <tn-empty mode="search"></tn-empty>
					  </view>
					  
					  <view style="margin-top: 16px;">
						  <tn-load-more v-if="orderList.length > 1"  :status="loadStatus" :fontSize="24" ></tn-load-more>
					  </view>
					  
					  
					</scroll-view>
				</swiper-item>
			</swiper>
			
			<TemplateLoading :active="loading"></TemplateLoading>
		</view>
	</view>
</template>

<script>
	import TemplateLoading from '../../components/loading.vue'
	import {userOrder} from '@/api/user/index.js'
	import {cancelOrder,confirmOrderStatus} from '@/api/order/order.js'
	
	export default {
		components:{TemplateLoading},
		
		data() {
			return {
				loading:false,
				list: [{
					name: '全部',
					order_status:""
				  },
				  {
					name: '待付款',
					order_status:0,
				  },
				  {
					name: '待服务',
					//count: 10,
					order_status:1
				  },
				  {
					name: '待评价',
					order_status:2
				  },
				  {
					name: '已完成',
					//count: 5,
					order_status:4
				  }
				],
				loadStatus:"loadmore",
				tabsIndex: 0,
				swiperIndex: 0,
				orderList:[],
				total:0,
				selectParam:{
					order_status:"",
					page:1,
					size:8
				}
			}
		},
		onLoad() {
			//this.initData()
		},
		onShow() {
			this.orderList = []
			this.selectParam.page = 1
			this.initData()
		},
		methods: {
			returnMoney(order_sn){
				uni.navigateTo({
					url:"/pages/user/order/return?order_sn="+order_sn
				})
			},
			beforeBack(){
				uni.redirectTo({
					url:"/pages/index/index?index=4"
				})
				return false;
			},
			// 标签栏值发生改变
			  tabsChange(index) {
				this.swiperIndex = index
				this.tabsIndex = index
				
				this.selectParam.order_status = this.list[index].order_status
				this.selectParam.page = 1
				this.total = 0
				this.orderList = []
				
				this.loading = true
				this.initData()
			  },
			  // swiper-item位置发生改变
			  swiperTransition(event) {
				this.$refs.tabs.setDx(event.detail.dx)
			  },
			  // swiper动画结束
			  swiperAnimationFinish(event) {
				const current = event.detail.current
				this.$refs.tabs.setFinishCurrent(current)
				if(this.swiperIndex != current){
					this.tabsChange(current)
				}
				
			  },
			  
			  initData(){
				  this.loading = true
				 userOrder(this.selectParam).then(res=>{
					 this.loading = false
					 this.orderList = [...this.orderList, ...res.data]
					 
					 if(res.data.length < this.selectParam.size || this.orderList.length == this.total){
						this.loadStatus = "nomore"
					 }else{
						this.loadStatus = "loadmore" 
					 }
					
					this.total = res.total
				 }, err=>{
					 this.loading = false
				 }) 
			  },
			  getMoreOrderList(){
				  if(this.loadStatus == "nomore" || this.orderList.length == 0 ) return;
				  
				  this.selectParam.page++
				  
				  this.loadStatus="loading"
				  this.initData()
			  },
			  orderStatusFilter(item){
				  if(item.is_return == 1) return "售后中";
				  if(item.is_return == 2) return "售后已完成";
				  var _list =[...this.list, {
					name: '已取消',
					order_status:-1
				  }]
				  
				  return _list.find(re=>re.order_status === item.order_status)?.name
			  },
			  orderTypeFilter(type){
				  if(type == 0) return "导师预约单";
				  if(type == 1) return "场地预约单";
				  if(type == 2) return "社群预约订单";
			  },
			  getSrc(item){
				  if(item.type == 0) return item.mentor.user.avatar
				  if(item.type == 1) return item.space.pic
				  if(item.type == 2) return item.activity.pic
			  },
			  getTitle(item){
				  if(item.type == 0) return item.mentor.nickname
				  if(item.type == 1) return item.space.title
				  if(item.type == 2) return item.activity.title
			  },
			  getPrice(item){
				  if(item.type == 0) return item.mentor.topic.price
				  if(item.type == 1) return item.space.price
				  if(item.type == 2) return item.activity.price
			 },
			 getTimesCount(str){
				 return str.split(",").length
			 },
			 orderDetail(order_sn){
				 uni.navigateTo({
				   url: '/pages/user/order/detail?order_sn='+order_sn
				 })
			 },
			 cancelOrders(order_sn){
				 this.loading = true
				 cancelOrder({order_sn:order_sn}).then(res=>{
					 this.loading = false
					 uni.showToast({
					 	icon:'none',
						title:"订单取消成功"
					 })
					 this.orderList = []
					 this.initData()
				 },err=>{
					 this.loading = false
					 
					 uni.showModal({
					 	content: '订单取消失败',
					 	success: function (res) {
					 		if (res.confirm) {
					 			//this.initData
					 		} else if (res.cancel) {
					 			//this.initData
					 		}
					 	}
					 });
				 })
			 },
			 confirmOrder(order_sn){
				 this.loading = true
				 confirmOrderStatus({order_sn:order_sn}).then(res=>{
					this.selectParam.page = 1
					this.orderList = [];
				 	this.initData()
				 },err=>{
					 this.loading = false
					 
					 uni.showModal({
						content: '操作失败',
						success: function (res) {
							if (res.confirm) {
								//this.initData
							} else if (res.cancel) {
								//this.initData
							}
						}
					 });
				 })
			 },
			 turnPay(order_sn){
				uni.navigateTo({
				  url: '/pages/order/pay/pay?order_sn='+order_sn
				})
			 },
			 comment(order_sn){
				uni.navigateTo({
				  url: '/pages/user/order/comment?order_sn='+order_sn
				}) 
			 }
		}
	}
</script>

<style lang="scss" scoped>
  .my_order{
	  background: $tn-main-bg;
	  height: 100vh;
	  padding-left: 6%;
	  padding-right: 6%;
  }
  
  .tn-radius10{border-radius: 10rpx;}
  
  .swiper__box,.list-scroll-content {
	//min-height: 500px;
	height: calc(100vh - (300rpx + env(safe-area-inset-bottom) / 2))
  }

  
  .rf-order-item{
	  background: #fff;
	  border-radius: 10rpx;
	  padding: 24rpx 20rpx;
	  margin-top: 16px;
	  font-size: 12px;
	  
	  .i-top{
		  display: flex;
		  justify-content: space-between;
		  border-bottom: 1px solid #e8e8e8;
		  padding-bottom: 8px;
	  }
	  .i-content{
		  display: flex;
		  margin: 9px 0;
		  color: #333;
		  
		  .rt{
			  width: 80%;
			 display: flex; 
			 justify-content: space-between;
			 padding-left: 12px;
		  }
		  
		  .info {font-size: 14px;}
		  .ft{
			color: #8e8e8e;
			text-align: right;
			.price{
				color: #8e8e8e;
			}
		  }
	  }
	  
	  .price-box{
		 display: flex;
		 justify-content: space-between; 
		 margin-bottom: 8px;
		 .total{color: #8e8e8e;}
		 
	  }
	  
	  .action-box{
		  text-align: right;
		  .action-btn{
			  background: $tn-main-orange;
			  color: #fff;
			  line-height: 26px;
			  height: 26px;
			  padding: 0 16rpx;
			  font-size: 12px;
			  width: 22%;
			  margin-left: 8px;
			  display: inline-block;
		  }
		  
		  .cacel-btn{
			  background: #fff;
			  color: #000;
			  border: 1px solid #333;
		  }
	  }
  }


</style>
